<template>
	<view class="lottery-situation">
		<!-- 中奖详情页面 -->
		<view class="goods-msg-detail">
			<view>
				<image :src="info.main_img" style="width: 100%;height: 422upx;"></image>
			</view>
			<view>
				<text style="word-break: break-all;">奖品：{{info.luckyPrize}}</text>
				<view>
					<view>
						<text v-if="info.open_type==1">{{info.openT}}自动开奖</text>
						<text v-if="info.open_type==2&&info.quota!=null">{{info.openT1}}&nbsp;满{{info.quota}}人&nbsp;自动开奖</text>
						<text>已参与人数{{info.num}}人</text>
					</view>
					<!--#ifdef MP-WEIXIN-->
					<button open-type="share" class="join-share">
						分享好友
					</button>
					<!--#endif-->
					<!--#ifdef H5-->
					<button open-type="share" class="join-share"  @click="open_share_tip">
						分享好友
					</button>
					<!--#endif-->
				</view>
			</view>
		</view>
		<!-- 中奖结果 -->
		<view class="lottery-result" v-if="info.result==2">
			<view>
				<view style="width: 6upx;height: 32upx;background: #00A66A;border-radius: 3upx;margin-top: 4upx;"></view>
				<view style="margin-left: 14upx">
					我的开奖结果
				</view>
			</view>
			<view style="text-align: center;margin-top: 60upx;">
				<image :src="acquire_lucky"></image>
			</view>
			<view class="gain-gift">
				<text style="display: inline-block;margin-top: 10upx;">最近获得奖励：</text>
				<view class="telephone-charge" v-for="(one,index) in info.user_prize" :key="index">
					<image :src="achievement_icon" style="width: 32upx;height: 32upx;margin-right: 10upx;vertical-align: middle;"></image>
					<text style="vertical-align: middle;">{{one}}</text>
				</view>
			</view>
			<view class="writeAds" @click="toAddresss" v-if="info.is_entity==1&&!hasAds">
				填写地址，领取奖品
			</view>
			<view class="person-msg-address" v-if="info.is_entity==1&&hasAds" @click="toAddresss">
				<view class="name-phone">
					<text style="margin-right: 30upx;font-weight:550;">{{userDefaultAds.name}}</text>
					<text>{{userDefaultAds.mobile}}</text>
				</view>
				<view class="address">
					<view style="margin-right: 28upx;">
						收货地址：<text>{{userDefaultAds.address}}</text>
					</view>
					<image :src="arrow_right" style="width: 14upx;height: 26upx;"></image>
				</view>
			</view>
		</view>
		<!-- 未中奖 -->
		<view class="no-lottery-result" v-else>
			<view>
				<view style="width: 6upx;height: 32upx;background: #00A66A;border-radius: 3upx;margin-top: 4upx;"></view>
				<view style="margin-left: 14upx">
					我的开奖结果
				</view>
			</view>
			<view>
				有点遗憾，本次未中奖哦！再接再厉！
			</view>
			<view>
				还有更多福利获得，等着你来拿哦！
			</view>
			<view class="tojoin" @click="toLucky">
				立刻去参与
			</view>
		</view>
	 	<!-- <view class="join-detail-swiper">
			 <swiper class="swiper" indicator-dots="true" autoplay="true" indicator-active-color="#00A66A" indicator-color="#EFEFEF">
				<swiper-item v-for="(item,index) in info.rotation_chart" :key="index">
					<view class="swiper-item uni-bg-red">
						<image :src="item"></image>
					</view>
				</swiper-item>
			</swiper>
		</view> -->
		<view class="accept-prize-explain">
			<view>
				<view style="width: 6upx;height: 32upx;background: #00A66A;border-radius: 3upx;margin-top: 4upx;"></view>
				<view style="margin-left: 14upx">
					领取说明
				</view>
			</view>
			<view>
				<text>1.中奖的虚拟物品，自动发放。无需填写地址</text>
				<text>2.实物商品，港澳台等地区无法送货</text>
			</view>
		</view>
		<view class="lottery-result-situation">
			<view>
				<view :class="lotteryResultIndex == index?'lottery-active':''" v-for="(item,index) in lotteryResult" :key="index" @click="chooseResult(index)">
					{{item}}
				</view>
			</view>
			<!-- 开奖结果 -->
			<view class="lottery-result-list" v-if="lotteryResultIndex == 0">
				<view style="font-weight: 550;">
					<text>幸运名单</text>
					<text>奖励</text>
				</view>
				<view class="prize-msg" v-for="(item,index) in info.allUserPrize" :key="index">
					<view>
						<image :src="item.avatarUrl" style="width: 80upx;height: 80upx;border-radius: 50%;vertical-align: middle;"></image>
						<text style="vertical-align: middle;margin-left: 20upx;">{{item.nickName}}</text>
					</view>
					<view style="padding-top: 16upx;box-sizing: border-box;">
						<text>{{item.prize}}</text>
					</view>
				</view>
			</view>
			<!-- 详情介绍 -->
			<view class="rich_text_module" v-else>
				<u-parse :content="info.details"></u-parse>
			</view>
		</view>
		<ending></ending>
		<view class="check-more" @click="toLucky">
			<view>
				查看更多免费参与获得
			</view>
		</view>
		<!-- #ifdef H5 -->
		<!-- 分享提示 -->
		<uni-popup ref="shareTip" :custom="true">
			<view class="popup_box_de_share"><image class="popup_box_close_share" src="/static/share_tip.png"></image></view>
		</uni-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import uParse from '@/components/un-parse/u-parse.vue'
	import {
		formatLuckyTime,formatMD
	} from '@/common/util.js'
	import ending from '../../common/ending.vue'
	export default{
		onShareAppMessage(res) {
			return {
				title: this.info.title,
				path: 'pages/smallLuckydetail/luckyJoinDetail?id='+this.id+'&share_id='+this.userId+'&fromJin=2',
				imageUrl: this.info.main_img
			}
		},
		components:{ending,uParse,uniPopup},
		data() {
			return {
				arrow_right: this.$imgUrl+'img/arrow_right.png',
				acquire_lucky: this.$imgUrl+'img/smallLucky/acquire_lucky.png',
				achievement_icon: this.$imgUrl+'img/privilege/achievement_icon.png',
				lotteryResult:['开奖结果','详情介绍'],
				lotteryResultIndex: 1,
				prizeMsgList:[
					{scr: this.$imgUrl+'img/advanced_lucky.png',name:'爱笑的鱼',gift:'1元话费x1',contribution:'100贡献值'},
					{scr: this.$imgUrl+'img/advanced_lucky.png',name:'爱笑的鱼',gift:'1元话费x1',contribution:'100贡献值'},
					{scr: this.$imgUrl+'img/advanced_lucky.png',name:'爱笑的鱼',gift:'',contribution:'100贡献值'},
					{scr: this.$imgUrl+'img/advanced_lucky.png',name:'爱笑的鱼',gift:'',contribution:'100贡献值'},
					{scr: this.$imgUrl+'img/advanced_lucky.png',name:'爱笑的鱼',gift:'1元话费x1',contribution:'100贡献值'},
				],
				
				token: this.$store.getters.getToken,
				userId: this.$store.getters.getUserId,
				// 小幸运id
				id: 0,
				info: {
					is_entity: 0,//0：虚 1：实
					main_img: '',
					luckyPrize: '',
					openT: '',
					openT1: '',
					quota: '',
					open_type: '',
					user_prize: [],
					result: 1,//1没中，2中奖
					allUserPrize: [],
					num:0,
					address: null
				},
				userDefaultAds: {},
				hasAds: true,
				qiehuan: 1,
				updateAddress_id: 0
			}
		},
		onLoad(options) {
			this.id = options.id
			if(options.userID!=undefined) {
				this.userId = options.userID
			}
			console.log('参与的小幸运的id',options.id)
		},
		onShow() {
			console.log('11111', this.qiehuan)
			console.log('11111', this.updateAddress_id)
			this.getInfo()
			this.getAddr()
			if (this.qiehuan > 1 && this.updateAddress_id > 0) {
				this.updateAddress()
			}
		},
		methods:{
			getAddr(){
				let data ={
					token:this.token,
					userID:this.userId
				}
				this.$api.getAddrList(data).then(res => {
					if(res.status){
						this.hasAds = false
						var addrList = res.list
						var reg = /^(\d{3})\d{4}(\d{4})$/
						for(let i = 0;i < addrList.length; i++){
							if(addrList[i].isDefault==1) {
								this.userDefaultAds = addrList[i]
								this.hasAds = true
								break;
							}
						}
					}else {
						this.hasAds = false
					}
				}).catch(err => {
					console.log('用户地址',err)
				})
			},
			// 获取中奖信息
			getInfo() {
				this.page = 1
				let data = {
					token: this.token,
					lucky_id: this.id
				}
				this.qiehuan++
				this.$api.get_reward_detail(data).then(res => {
					if(res.status) {
						res.data.openT = formatLuckyTime(res.data.open_time)
						res.data.openT1 = formatMD(res.data.start_time)
						let str = []
						for(let j=0;j<res.data.prize.length;j++) {
							str.push(res.data.prize[j].prize+'×'+res.data.prize[j].num)
						}
						res.data.luckyPrize = str.join(',')
						this.info = res.data
						this.updateAddress_id = res.data.address_id
					}else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						})
						setTimeout(()=>{
							uni.navigateBack({
							})
						},500)
					}
					console.log('获取中奖信息',res)
				}).catch(err => {
					console.log('获取中奖信息',err)
				})
			},
			chooseResult(index){
				this.lotteryResultIndex = index
			},
			open_share_tip() {
				this.$refs.shareTip.open();
			},
			toAddresss() {
				uni.navigateTo({
					url: '../memberCenter/addressManage/addressManage?lucky_id=' + this.id
				})
			},
			
			toLucky() {
				uni.navigateTo({
					url: '../welfare/moreList?index=0'
				})
			},
			updateAddress() {
				// let data = {
				// 	token: this.token,
				// 	id: this.id,
				// 	address_id: this.updateAddress_id
				// }
				// this.$api.update_user_address(data).then(res => {
				// 	console.log('res', res)
				// 	if (res.status) {
						
				// 	}
				// }).catch(err => {
				// 	console.log('收货信息',err)
				// })
			}
		}
	}
</script>

<style>
	.person-msg-address{
		width: 100%;
		background: #fff;
		padding-top: 22upx;
		box-sizing: border-box;
	}
	.name-phone>text{
		display: inline-block;
		color: #333333;
	}
	.address{
		font-size: 28upx;
		color: #333333;
		display: flex;
		justify-content: space-between;
		margin-top: 8upx;
		word-break: break-all;
	}
	.rich_text_module{
		padding: 22upx 0;
		background: #fff;
	}
	.detail-welfare{
		color: #666666;
		font-size: 28upx;
		margin-top: 22upx;
	}
	.detail-welfare-color{
		color: #FF5C46;
	}
	/* 未中奖 */
	.no-lottery-result{
		width: 100%;
		height: 512upx;
		background: #FFFFFF;
		margin-top: 20upx;
		padding: 0 30upx;
		box-sizing: border-box;
		text-align: center;
	}
	.no-lottery-result>view:first-child{
		padding: 22upx 0;
		box-sizing: border-box;
		border-bottom: 0.5px solid #DEDEDE;
		font-size: 30upx;
		color: #333;
		line-height: 42upx;
		display: flex;
	}
	.no-lottery-result>view:nth-child(2){
		margin-top: 66upx;
		color: #666666;
		font-size: 34upx;
		line-height: 48upx;
	}
	.no-lottery-result>view:nth-child(3){
		margin-top: 60upx;
		color: #333333;
		font-size: 28upx;
		line-height: 40upx;
	}
	.no-lottery-result .tojoin{
		width: 430upx;
		height: 80upx;
		line-height: 80upx;
		border: 1px solid #00A66A;
		color: #00A66A;
		margin: 0 auto;
		margin-top: 68upx;
		border-radius: 40upx;
		font-weight: 550;
		font-size: 30upx;
	}
	page{
		position: relative;
		top: 0;left: 0;right: 0;bottom: 0;
	}
	.lottery-situation{
		width: 100%;
		height: 100%;
		background: #F5F6F9;
	}
	.goods-msg-detail{
		width: 100%;
		/* height: 604upx; */
		background: #FFFFFF;
	}
	.goods-msg-detail>view:last-child{
		padding: 20upx 30upx 30upx 30upx;
		box-sizing: border-box;
	}
	.goods-msg-detail>view:last-child>view text{
		display: block;
	}
	.goods-msg-detail>view:last-child>view text:first-child{
		color: #FF3C00;
		font-size: 28upx;
		line-height: 40upx;
	}
	.goods-msg-detail>view:last-child>view text:last-child{
		color: #999999;
		font-size: 24upx;
		line-height: 34upx;
	}
	.goods-msg-detail>view:last-child>view{
		margin-top: 14upx;
		display: flex;
		justify-content: space-between;
	}
	.goods-msg-detail>view:last-child>view .join-share{
		width: 180upx;
		height: 60upx;
		line-height: 60upx;
		text-align: center;
		color: #FFFFFF;
		background: linear-gradient(#B3EA00,#00A66A);
		box-shadow: 0 4upx 8upx 0 rgba(0, 166, 106, 0.35);
		font-size: 30upx;
		border-radius: 30upx;
		margin-top: 10upx;
	}
	.lottery-result{
		width: 100%;
		background: #fff;
		margin-top: 20upx;
		padding: 0 30upx;
		box-sizing: border-box;
		padding-bottom: 26upx;
	}
	.lottery-result>view:first-child{
		padding: 22upx 0;
		box-sizing: border-box;
		border-bottom: 0.5px solid #DEDEDE;
		font-size: 30upx;
		color: #333;
		line-height: 42upx;
		display: flex;
	}
	.lottery-result>view image{
		height: 46upx;
	}
	.gain-gift{
		display: flex;
		margin-top: 58upx;
		font-size: 28upx;
		color: #333333;
	}
	.gain-gift .telephone-charge{
		height: 58upx;
		line-height: 53upx;
		background: rgba(43,210,204,0.09);
		color: #FF5C46;
		border-radius: 28upx;
		text-align: center;
		padding: 0upx 20upx;
		margin-right: 16upx;
	}
	.lottery-result .writeAds{
		width: 430upx;
		height: 80upx;
		line-height: 80upx;
		border: 1px solid #00A66A;
		border-radius: 40upx;
		text-align: center;
		color: #00A66A;
		font-size: 30upx;
		margin: 0 auto;
		margin-top: 60upx;
		margin-bottom: 34upx;
		font-weight: 550;
	}
	.join-detail-swiper{
		width: 100%;
		height: 182upx;
		background: #FFFFFF;
		margin-top: 20upx;
		padding-left: 30upx;
		padding-top: 16upx;
		box-sizing: border-box;
	}
	.join-detail-swiper image{
		width: 690upx;
		height: 130upx;
	}
	.join-detail-swiper .swiper,.join-detail-swiper .swiper swiper-item{
		width: 690upx;
		height: 180upx;
	}
	.accept-prize-explain{
		width: 100%;
		/* height: 236upx; */
		background: #fff;
		margin-top: 20upx;
		padding: 0 30upx;
		box-sizing: border-box;
	}
	.accept-prize-explain>view:first-child{
		padding: 22upx 0;
		box-sizing: border-box;
		border-bottom: 0.5px solid #DEDEDE;
		font-size: 30upx;
		color: #333;
		line-height: 42upx;
		display: flex;
	}
	.accept-prize-explain>view:last-child{
		padding-bottom: 22upx;
		box-sizing: border-box;
		color: #000000;
		font-size: 28upx;
	}
	.accept-prize-explain>view:last-child text{
		display: block;
		margin-top: 20upx;
		color: #666666;
		font-size: 28upx;
	}
	.lottery-result-situation{
		width: 100%;
		/* height: 775upx; */
		background: #FFFFFF;
		margin-top: 20upx;
		padding: 0 30upx;
		padding-top: 30upx;
		box-sizing: border-box;
	}
	.lottery-result-situation>view:first-child{
		width: 100%;
		height: 64upx;
		border-radius: 34upx;
		display: flex;
		justify-content: space-between;
		background: #EFEFEF;
		color: #666666;
		text-align: center;
		font-size: 28upx;
		line-height: 64upx;
	}
	.lottery-result-situation>view:first-child>view{
		width: 344upx;
	}
	.lottery-result-situation>view:first-child .lottery-active{
		background: linear-gradient(to right,#4CCB31,#00B574);
		border-radius: 34upx;
		color: #FFFFFF;
	}
	.lottery-result-list{
		padding: 0 10upx;
		box-sizing: border-box;
		margin-top: 30upx;
		width: 100%;
		line-height: 42upx;
	}
	.lottery-result-list>view:first-child{
		width: 100%;
		display: flex;
		padding-bottom: 10upx;
		box-sizing: border-box;
		justify-content: space-between;
		text-align: center;
	}
	.lottery-result-list>view:first-child>text{
		width: 344upx;
		display: block;
		color: #333333;
		font-size: 30upx;
	}
	.prize-msg{
		width: 100%;
		padding: 20upx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		border-top: 1upx solid #DEDEDE;
	}
	.prize-msg text{
		display: inline-block;
		/* line-height: 80upx; */
		color: #666666;
		font-size: 30upx;
	}
	.check-more{
		width: 100%;
		height: 100upx;
		background: #FFFFFF;
		padding: 10upx 0;
		box-sizing: border-box;
	}
	.check-more view{
		width: 430upx;
		line-height: 80upx;
		height: 80upx;
		margin: 0 auto;
		border-radius: 40upx;
		border: 1px solid #00A66A ;
		text-align: center;
		color: #00A66A;
		font-size: 30upx;
		font-weight: 550;
	}
	
	 /* 分享提示 */
	.popup_box_de_share {
		width: 100%;
		height: 100%;
	}
	.popup_box_close_share {
		width: 300upx;
		height: 300upx;
		position: fixed;
		top: 10upx;
		right: 10upx;
	}
	.popup_box_title {
		display: flex;
		justify-content: space-between;
	}
	.popup_box_title > view:nth-child(2) {
		color: #333333;
		font-size: 34upx;
	}
	.popup_box_title_tip {
		color: #999999;
		font-size: 24upx;
		text-align: center;
		margin-top: 10upx;
	}
	.popup_box_tip {
		color: #666666;
		font-size: 26upx;
		text-align: center;
	}
	.popup_box_title > .line {
		width: 84upx;
		height: 2upx;
		border-top: 1upx solid #dedede;
		margin-top: 24upx;
	}
	.popup_box_de {
		width: 592upx;
		height: 744upx;
		position: relative;
		z-index: 999;
	}
	.popup_box_close {
		width: 52upx;
		height: 52upx;
		position: absolute;
		top: 0;
		right: 0;
	}
	.popup_box_content {
		width: 100%;
		height: 682upx;
		background: #ffffff;
		position: absolute;
		top: 72upx;
		left: 0;
		border-radius: 16upx;
		z-index: 999;
		padding: 40upx 46upx;
		box-sizing: border-box;
	}
	.popup_box_content > image {
		width: 388upx;
		height: 386upx;
		margin: 24upx auto 0;
		margin-left: 40upx;
	}
</style>
